<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="/tp3.2/Public/css/login.css">
    <script type="text/javascript" src="/tp3.2/Public/js/jquery-3.2.0.min.js"></script>
</head>
<body>
<div class="header">
    <div class="header-login"><a href="<?php echo U('Index/index');?>">BackStage</a></div>
    <div class="header-navreg">
        <span>已有账号，<a class="header-url" href="<?php echo U('User/login');?>">立即登录</a></span>
    </div>
</div>
<div class="main" style="padding-top: 60px">
    <div class="main-form" style="padding-top: 30px; height: 450px;width: 600px; ">
        <p style="text-align: center">register</p>
        <label class="form-input">
            <span class="form-tag" style="margin-right: 45px">username:</span>
            <input type="text" id="username" placeholder="取个有个性的昵称吧">
            <span class="tip"><a href=""></a></span>
        </label>
        <label class="form-input"><span class="warn1"></span></label>
        <label class="form-input">
            <span class="form-tag" style="margin-right:45px">password:</span>
            <input type="password" id="password" placeholder="密码长度不应低于3位">
            <span class="tip"><a href="" ></a></span>
        </label>
        <label class="form-input"><span class="warn2"></span></label>
        <label class="form-input">
            <span class="form-tag" style="margin-right: 70px">E-mail:</span>
            <input type="text" id="mail" placeholder="输入您的电子邮箱">
            <span class="tip"><a href=""></a></span>
        </label>
        <label class="form-input"><span class="warn3"></span></label>
        <label class="form-input">
            <span class="form-tag" style="margin-right: 20px">your reason:</span>
            <textarea id="instruct" placeholder="您申请注册的理由，不应少于4个字"></textarea>
            <span class="tip"><a href="" ></a></span>
        </label>
        <label class="form-input"><span class="warn4"></span></label>
        <label class="form-input">
            <span class="form-tag"></span>
            <input type="button" id="button" value="立即注册">
        </label>
    </div>
</div>
<div class="footer"></div>
</body>
<script type="text/javascript" >
    /**
     * Created by Administrator on 2017/4/24.
     */
    /*匹配User/register.html的js*/
    /*用户名输入状态判断*/
    $("#username").on('blur',function(){
        var username=$("#username").val();
        var lenusername=username.length;
        var regName=/^[0-9a-z]{3,18}$/i;/*正则表达式查找字母数字*/
        var test=regName.test(username);
        if(lenusername==0){
            $(".warn1").css("color","#FF0512");
            $(".warn1").text("✘昵称不能为空！");
        }else if (lenusername < 3 || lenusername > 18){
            $(".warn1").css("color","#FF0512");
            $(".warn1").text("✘3-18位数字字母组合！");
        }else if(!test){
            $(".warn1").css("color","#FF0512");
            $(".warn1").text("✘昵称不能含有非法字符！")
        }else{
            $(".warn1").text("") ;
        }
    });

    /*密码输入状态判断*/
    $("#password").bind("blur",function(){
        var password = $("#password").val() ;
        var lenPsd = password.length ;
        if(lenPsd==0){
            $(".warn2").css("color","#FF0512") ;
            $(".warn2").text("✘密码不能为空！") ;
        }else if(lenPsd < 3 || lenPsd > 15){
            $(".warn2").css("color","#FF0512") ;
            $(".warn2").text("✘密码长度不符合要求！") ;
        }else {
            $(".warn2").text("") ;
        }
    });

    /*电子邮箱判断*/
    $("#mail").on('blur',function(){
        var mail=$("#mail").val();
        var lenmail=mail.length;
        var regName=/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;/*正则表达式查找字母数字*/
        var test=regName.test(mail);
        if(lenmail==0){
            $(".warn3").css("color","#FF0512");
            $(".warn3").text("✘邮箱不能为空！");
        }else if(!test){
            $(".warn3").css("color","#FF0512");
            $(".warn3").text("✘请输入正确的邮箱！")
        }else{
            $.ajax({
                type: "POST",
                url: "<?php echo U('Home/Ajax/mail_test');?>",
                data: {mail: mail},
                dataType: "text",
                success:function(re){

                    if(re==0){
                        $(".warn3").css("color","#14ebc8");
                        $(".warn3").text("邮箱可用！")
                    }else if(re==1){
                        $(".warn3").css("color","#FF0512");
                        $(".warn3").text("✘此邮箱已注册，不能再次注册！")
                    }
                }
            })
        }
    });

    /*申请原因说明*/
    $("#instruct").bind("blur",function(){
        var instruct = $("#instruct").val() ;
        var lenins = instruct.length ;
        if(lenins==0){
            $(".warn4").css("color","#FF0512") ;
            $(".warn4").text("✘说明原因不能为空！") ;
        }else if(lenins<4){
            $(".warn4").css("color","#FF0512") ;
            $(".warn4").text("✘再说点什么吧！") ;
        }else {
            $(".warn4").text("") ;
        }
    });


    /*点击注册按钮提交数据*/
    $("#button").on('click',function(){
        var username=$("#username").val();
        var mail=$("#mail").val();
        var password=$("#password").val();
        var instruct=$("#instruct").val();
        var l1=username.length;
        var l2=password.length;
        var l3=mail.length;
        var l4=instruct.length;
        /*二次验证过程*/
        var regName=/^[0-9a-z]{3,18}$/i;/*正则表达式查找字母数字*/
        var test=regName.test(username);
        if(l1==0){
            $(".warn1").css("color","#FF0512");
            $(".warn1").text("✘昵称不能为空！");
        }else if (l1 < 3 || l1 > 18){
            $(".warn1").css("color","#FF0512");
            $(".warn1").text("✘3-18位数字字母组合！");
        }else if(!test){
            $(".warn1").css("color","#FF0512");
            $(".warn1").text("✘昵称不能含有非法字符！")
        }else{
            $("#username").attr("index", "1");
            var i=$("#username").attr("index");/*定义输入框状态属性*/
        }

        if(l2==0){
            $(".warn2").css("color","#FF0512") ;
            $(".warn2").text("✘密码不能为空！") ;
        }else if(l2 < 3 || l2 > 15){
            $(".warn2").css("color","#FF0512") ;
            $(".warn2").text("✘密码长度不符合要求！") ;
        }else {
            $("#password").attr("index", "1");
            var j=$("#password").attr("index");/*定义输入框状态属性*/
        }

        var regName1=/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;/*正则表达式查找字母数字*/
        var test1=regName1.test(mail);
        if (l3==0) {
            $(".warn3").css("color", "#ff0512");
            $(".warn3").text("✘请输入电子邮箱！");
        }else if(!test1){
            $(".warn3").css("color","#FF0512");
            $(".warn3").text("✘请输入正确的邮箱！")
        } else {
            $("#mail").attr("index", "1");
            var k=$("#mail").attr("index");/*定义输入框状态属性*/
        }

        if(l4==0){
            $(".warn4").css("color","#FF0512") ;
            $(".warn4").text("✘说明原因不能为空！") ;
        }else if(l4<4){
            $(".warn4").css("color","#FF0512") ;
            $(".warn4").text("✘再说点什么吧！") ;
        }else {
            $("#instruct").attr("index", "1");
            var t=$("#instruct").attr("index");
        }

        /*若输入状态正常则发送数据到服务器验证*/
        if(i==1&&j==1&&k==1&&t==1){
            $.ajax({
                type: "POST",
                url: "<?php echo U('Home/Ajax/register');?>",
                data: {username: username ,password: password,mail:mail,instruct:instruct},
                dataType: "text",
                success:function(re){
                    if(re==0){
                        if(window.confirm('注册成功，是否立即登录？')){
                            window.location.href="<?php echo U('Home/User/login');?>";
                        }else{
                            window.location.reload();
                        }
                    }else if(re==1){
                        window.alert("邮箱已存在，不能重复注册！");
                        window.location.reload();
                    }
                }
            })
        }
    })
</script>
</html>